<template>
	<view style="width: 100%;height: 100%;">
		<cu-custom :isFromOutside="isFromOutSide" :isBack="true" leftIcon="edit" :showLeftIcon="true" @leftBtnClick="jumpToPublish">
			<block slot="backText">{{isFromOutSide?'首页':'返回'}}</block>
			<block slot="content">话题详情</block>
		</cu-custom>
		<view class="flex justify-start align-start bg-white solid-bottom padding-bottom-sm"
			style="flex-direction: column;width: 100%;">
			<view class="flex justify-start align-start padding-left-sm padding-right-sm padding-top-sm"
				style="width: 100%;">
				<view class="padding-right-sm">
					<view class="flex justify-center align-center" style="flex-direction: column;">
						<image :src="topic.image" style="width: 144upx;height: 144upx;"></image>
					</view>
				</view>
				<view class="flex justify-start align-start" style="flex-direction: column;">
					<view class="flex justify-between align-center" style="width: 100%;">
						<text class="text-bold text-lg padding-right-sm">{{topic.title}}</text>
					</view>
					<text class="text-df text-grey padding-top-sm">{{topic.introduce}}</text>
				</view>
			</view>
			<view class="flex justify-between align-center" style="width: 100%;">
				<view class="flex justify-center align-center padding-left-sm padding-right-sm"
					style="min-width: 184upx;">
					<view v-if="topic.is_attention==1" class="padding-top-sm">
						<view @tap="attentionAction(0)" class="cu-tag line-grey radius sm">已关注</view>
					</view>
					<view v-else class="padding-top-sm">
						<button @tap="attentionAction(1)" class="cu-btn radius bg-orange sm"><text
								class="cuIcon-add"></text>关注</button>
					</view>
				</view>
				<view class="flex justify-start align-center padding-top padding-right-sm" style="width: 100%;">
					<view class="flex justify-start align-center">
						<text class="text-sm text-gray">{{topic.post_count}}讨论帖</text>
						<text class="text-sm text-gray padding-left">{{topic.read_count}}次浏览</text>
					</view>
				</view>
			</view>
		</view>
		<view class="solid-bottom" style="width: 100%;">
			<scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
				<view class="cu-item" :class="index==TabCur?'text-blue cur':''" v-for="(item,index) in navItems"
					:key="index" @tap="tabSelect" :data-id="index">
					{{item}}
				</view>
			</scroll-view>
		</view>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption">
			<view v-for="(item,index) in dataList" :key="index">
				<view v-if="sortMenu.showType==2">
					<post-item v-if="item.show_type==1||item.show_type==4" :shouldShowTopic="false"
						:showImage="item.show_type!==4" @click="jumpDetail(item)" :post="item"
						:isLast="index===dataList.length-1"></post-item>
					<post-item-title v-else-if="item.show_type==3" @click="jumpDetail(item)" :post="item"
						:isLast="index===dataList.length-1"></post-item-title>
					<post-item-image :shouldShowTopic="false" v-else-if="item.show_type==5||item.show_type==6"
						:showSummary="item.show_type==6" @click="jumpDetail(item)" :post="item"
						:isLast="index===dataList.length-1"></post-item-image>
				</view>
				<view v-else>
					<view v-if="sortMenu.showType==1">
						<post-item @click="jumpDetail(item)" :post="item" :isLast="index===dataList.length-1">
						</post-item>
					</view>
					<view v-else-if="sortMenu.showType==3">
						<post-item-title @click="jumpDetail(item)" :post="item" :isLast="index===dataList.length-1">
						</post-item-title>
					</view>
					<view v-else-if="sortMenu.showType==4">
						<post-item :showImage="false" @click="jumpDetail(item)" :post="item"
							:isLast="index===dataList.length-1"></post-item>
					</view>
					<view v-else-if="sortMenu.showType==5">
						<post-item-image :showSummary="false" @click="jumpDetail(item)" :post="item"
							:isLast="index===dataList.length-1"></post-item-image>
					</view>
					<view v-else-if="sortMenu.showType==6">
						<post-item-image :showSummary="true" @click="jumpDetail(item)" :post="item"
							:isLast="index===dataList.length-1"></post-item-image>
					</view>
				</view>
			</view>
		</mescroll-body>
		<float-tabbar ref="floatBar" :leftTitle="topic.is_attention==1?'已关注':'关注'" :showLeftIcon="topic.is_attention==0" @leftClick="attentionSwitch" @middleClick="jumpToPublish" :needAction="floatBarNeedAction" class="float-bar"></float-tabbar>
		<tui-actionsheet :show="sortMenu.showActionSheet" :tips="sortMenu.tips" :item-list="sortMenu.itemList"
			:mask-closable="sortMenu.maskClosable" :color="sortMenu.color" :size="sortMenu.size"
			:is-cancel="sortMenu.isCancel" @click="itemClick" @cancel="closeActionSheet"></tui-actionsheet>
	</view>
</template>

<script>
	import PostItem from '@/components/post-item.vue';
	import PostItemTitle from '@/components/post-item-title.vue';
	import PostItemImage from '@/components/post-item-image.vue';
	import FloatTabbar from '@/components/float-tabbar.vue';
	import {
		getTimeDistance
	} from '@/api/utils.js'
	import {
		getHomeListMode
	} from '@/api/statusCache.js'
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import {
		getPostListByTopic,
		attentionTopic,
		getTopicAttentionStatus,
		getTopicDetail
	} from '@/api/api.js';
	import config from '@/api/config.js'
	import {
		checkLogin
	} from '@/js_sdk/checkLogin.js'
	import {
		isLogin
	} from '@/api/auth.js'
	export default {
		mixins: [MescrollMixin],
		components: {
			PostItem,
			PostItemTitle,
			PostItemImage,
			FloatTabbar
		},
		onPageScroll(res) {
			if(res.scrollTop <= 0) {
				this.$refs.floatBar.showTabbar()
				return
			}
			let scrollTop = this.lastSrollTop
			if(res.scrollTop > scrollTop) {
				this.$refs.floatBar.hiddenTabbar()
			}else{
				this.$refs.floatBar.showTabbar()
			}
			this.lastSrollTop = res.scrollTop
		},
		data() {
			return {
				floatBarNeedAction:true,
				lastSrollTop:0,
				isFromOutSide:false,
				navItems: [
					'最新',
					'热门'
				],
				TabCur: 0,
				scrollLeft: 0,
				topicId:null,
				topic: null,
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				windowScale: 0,
				windowHeight: 0,
				sortMenu: {
					showType: 2,
					showActionSheet: false,
					maskClosable: true,
					itemList: [{
							text: "标准模式",
							color: "#2B2B2B"
						},
						{
							text: "自动调节",
							color: "#2B2B2B"
						}, {
							text: "纯标题",
							color: "#2B2B2B"
						}, {
							text: "标题概要",
							color: "#2B2B2B"
						}, {
							text: "图享模式",
							color: "#2B2B2B"
						}, {
							text: "图文模式",
							color: "#2B2B2B"
						}
					],
					color: "#9a9a9a",
					size: 26,
					isCancel: true
				},
				dataList: [],
				upOption: {
					page: {
						size: 10 // 每页数据的数量,默认10
					},
					textNoMore: config.customNoMore,
					noMoreSize: 1, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '暂无相关数据'
					}
				},
			}
		},
		onLoad(options) {
			let scene = uni.getStorageSync('AppLaunchFromTimeline')
			if (scene !== null && scene !== undefined && scene !== "") {
				this.isFromOutSide = true
			}
			if(options.topicId !== null && options.topicId !== undefined) {
				this.topicId = options.topicId
				this.initTopicInfo()
				if(options.outside !== null && options.outside !== undefined) {
					this.isFromOutSide = true
				}
			}
			let _this = this
			uni.getSystemInfo({
				success(res) {
					_this.windowScale = res.pixelRatio
					_this.windowHeight = res.windowHeight
				}
			})
		},
		methods: {
			onShareAppMessage(res) {
				if(this.topic == null) {
					return {
						title: config.indexShareTitle,
						path: '/pages/index/index'
					}
				}
				return {
					title: this.topic.title,
					path: '/pages/always/topic-post-list/topic-post-list?outside=1&topicId='+this.topic.topic_id
				}
			},
			onShareTimeline(res) {
				if(this.topic == null) {
					return {
						title: config.indexShareTitle,
						path: '/pages/index/index'
					}
				}
				return {
					title: this.topic.title,
					path: '/pages/always/topic-post-list/topic-post-list?outside=1&topicId='+this.topic.topic_id
				}
			},
			initTopicInfo() 
			{
				if(this.topicId == null || this.topicId == undefined) {
					return
				}
				getTopicDetail(this.topicId).then(res=>{
					this.topic = res.data
				}).catch(error=>{
					
				})
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
				if (this.mescroll) {
					this.mescroll.triggerDownScroll()
				}
			},
			jumpToUserProfile(userId) {
				uni.navigateTo({
					url: '/pages/profile/profile?userId=' + userId
				})
			},
			attentionSwitch() 
			{
				if(this.topic.is_attention == 1) {
					this.attentionAction(0)
				}else{
					this.attentionAction(1)
				}
			},
			attentionAction(status) {
				if (isLogin() == false) {
					checkLogin()
					return
				}
				uni.showLoading({
					title: '正在提交...'
				})
				attentionTopic(this.topicId, status).then(res => {
					uni.hideLoading()
					this.topic.is_attention = status
					this.$forceUpdate()
					let tip = status == 1 ? '已关注' : '已取消'
					uni.showToast({
						title: tip
					})
				}).catch(error => {
					uni.hideLoading()
				})
			},
			jumpToPublish() {
				if (isLogin() == false) {
					checkLogin()
					return
				}
				let that = this
				uni.navigateTo({
					url: '/pages/publish/publish?fromTopic=1',
					success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('topicPostPublish', that.topic)
					}
				})
			},
			getRandomNum(Min, Max) {
				var Range = Max - Min;
				var Rand = Math.random();
				let rand = (Min + Math.round(Rand * Range));
				return rand
			},
			adjustShowType(post) {
				if (post.image_list == null || post.image_list.length == 0) {
					if (post.summary.length < 15) {
						if(post.topic_id>0) {
							return 1
						}
						return 3
					}
					return 4
				}
				if (post.image_list.length == 1) {
					return 1
				}
				//图片
				if (post.summary == null || post.summary.length < 15) {
					let canTypes = [5, 6]
					let randomType = this.getRandomNum(0, 1);
					return canTypes[randomType]
				}
				if (post.image_list.length == 1) {
					return 1
				}
				if (post.image_list.length == 2) {
					let canTypes = [1, 5]
					if (post.comment_count < 10) {
						let randomType = this.getRandomNum(0, 1);
						return canTypes[randomType]
					}
					canTypes = [5, 6]
					let randomType = this.getRandomNum(0, 1);
					return canTypes[randomType]
				}
				if (post.image_list.length > 2) {
					let canTypes = [5, 6]
					let randomType = this.getRandomNum(0, 1);
					return canTypes[randomType]
				}
				return 1
			},
			jumpDetail(post) {
				console.log(post)
				uni.navigateTo({
					url: '/pages/detail/detail?postId=' + post.post_id
				})
			},
			getDataList(pageIndex, pageSize) {
				this.floatBarNeedAction = false
				let type = this.TabCur==1?0:1
				getPostListByTopic(this.topicId, pageIndex, pageSize, type).then(res => {
					res.data.list.forEach(item => {
						//最多显示三张图片
						if (item.image_list && item.image_list.length > 3) {
							item.image_list = item.image_list.slice(0, 3)
						}
						item.show_type = this.adjustShowType(item)
						if (item.image_list && item.image_list.length > 0) {
							item.icon = 'pic'
						}
						item.show_time = getTimeDistance(item.created_at)
					})
					let pageList = res.data.list
					if (pageIndex == 0) {
						this.dataList = pageList
					} else {
						this.dataList = this.dataList.concat(pageList);
					}
					console.log('page length:' + pageList.length)
					let hasNext = pageList.length >= pageSize
					if (this.mescroll) {
						this.mescroll.endSuccess(pageList.length, hasNext);
					}
					this.floatBarNeedAction = true
				}).catch(error => {
					if (this.mescroll) {
						this.mescroll.endErr()
					}
					this.floatBarNeedAction = true
				})
			},
			downCallback() {
				this.initTopicInfo()
				if (this.mescroll) {
					this.mescroll.resetUpScroll()
				}
			},
			upCallback(page) {
				let pageIndex = page.num - 1
				this.getDataList(pageIndex, page.size)
			},
		},
	}
</script>

<style scoped>
	.float-bar {
		position: fixed;
		width: 100%;
		bottom: 50upx;
		z-index: 1024;
	}
</style>
